<template>
  <div class="component component--layout layout--D2">
    <header class="header header--primary" v-if="titleName.title">
      <h2 class="title">
        <span class="label">{{ titleName.title }}</span>
      </h2>
      <p class="paragraph">
        {{ titleName.name }}
      </p>
    </header>
    <!-- frontPage.vue  3行 头条 -->
    <div class="column column--primary">
      <div class="element element--article" v-for="(item, index) in props.FrontData" :key="index">
        <figure class="article__figure">
            <div @click="tabclick(item)">
              <img class="lazyautosizes" :src="item.imgUrl" v-if="item.imgUrl" />
              <img src="../../../../assets/noimg.png" alt="" v-else>
            </div>
            
          <!-- <router-link class="figure__image"
            :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
            <img class="lazyautosizes" :src="item.imgUrl" v-if="item.imgUrl" />
            <img src="../../../assets/noImage.png" alt="" v-else>
          </router-link> -->
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <div @click="tabclick(item)"  class="link">{{
              item.title }}</div>
          </h3>
          <p class="article__summary">
            {{ item.summary }}
          </p>
          <div class="content--secondary" v-if='item.company'>
            <div class="group group--tickers">
              <bg-quote :class="[item.data < 0 ? 'negative' : 'positive']">
                
                <div class="ticker" @click="tabclick(item)" >
                  <span class="ticker__symbol">{{ item.company }}</span>
                  <bg-quote class="ticker__change">{{ item.ticketChange }}</bg-quote>
                  <i class="icon"></i>
                </div>
              </bg-quote>
            </div>
          </div>

        </div>
      </div>
    </div>
    <!-- frontPage.vue  30行 头条 -->
    <div class="column column--aside">
      <div class="element element--article" v-for="(item, index) in props.FrontData1" :key="index">
        <figure class="article__figure">
          <div class="figure__image"
          @click="tabclick(item)">
            <img class="lazyautosizes lazyloaded" :src="item.imgUrl" v-if="item.imgUrl" />
            <img v-else src="../../../../assets/noimg.png" alt="">
        </div>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <div class="link" @click="tabclick(item)">{{
              item.title }}</div>
          </h3>
        </div>
      </div>
    </div>
  </div>


</template>
<script setup>
const props = defineProps(['FrontData', 'FrontData1', 'titleName'])
props.FrontData.forEach((item) => {
  if (item.ticketChange && item.ticketChange !== null) {
    item.data = parseFloat(item.ticketChange) / 100;
  }
})
import { useRouter } from "vue-router";
const router = useRouter();
function tabclick(item) {
  console.log(item)
  if(item.uuid !== ""){
    router.push({ name: 'NewDetail', params: { uuid: item.uuid, author: item.author }})
  }
}
</script>
<style lang="scss" scoped>
.column--aside {
  color: #262626;
  box-sizing: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  position: relative;
  display: flex;
  align-content: flex-start;
  padding: 0 10px;
  width: 100%;
  align-items: stretch;
  max-width: none;
  flex-flow: row wrap;
  justify-content: space-between;
  max-width: 320px;
}
</style>
